<template>
  <div class="proportion-analyse-container">
    <div class="choose-var">
      <div
        class="choose-box"
        @click="openVarBox"
      >
        <van-icon name="plus" />
        <span class="color-gray">选择变量</span>
      </div>
    </div>

    <van-popup
      v-model="showVarBox"
      position="bottom"
      :close-on-click-overlay="false"
      :style="{ height: '64%' }"
    >
      <div class="var-box">
        <div class="var-box-header">
          <span class="model-name">{{ deviceModelName || '' }}</span>
          <p class="model-choose">已选择（<span class="color-primary">{{ chooseVarData.length }}</span>/5）</p>
        </div>
        <div class="var-search-box">
          <van-search
            v-model="searchKey"
            shape="round"
            placeholder="输入变量名称查找"
            clearable
            @search="handleSearch"
            @clear="handleClear"
          />
        </div>
        <ul class="var-list scroll-box">
          <li
            v-for="item in filterVarList"
            :key="item.vname"
            :class="{'color-primary': item.checked}"
            @click="selectVar(item)"
          >
            <span>{{ item.vname}}</span>
            <van-icon
              name="success"
              v-if="item.checked"
            />
          </li>
        </ul>
        <ul class="operate-box">
          <li @click="cancelSelect">取消</li>
          <li
            class="color-primary"
            @click="confirmSelect"
          >确定</li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup, Search } from 'vant';
import { getModelVariable } from '@/api/historyData.js';

export default {
  name: 'ProportionAnalyse',
  components: {
    [Popup.name]: Popup,
    [Search.name]: Search
  },
  props: {
    deviceCondition: {
      type: Object,
      required: true,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      showVarBox: false,
      searchKey: '',
      varTotal: 0,
      varList: [],
      filterVarList: [],
      deviceModelId: '',
      deviceModelName: '',
      chooseVarData: [],
      oldChooseVarData: []
    };
  },
  created() {
    this.deviceModelName = this.deviceCondition.deviceModelName || '';
  },
  methods: {
    // 打开选择变量
    openVarBox() {
      if (this.deviceCondition.deviceModelId) {
        this.showVarBox = true;
        this.getModelVariable();
        this.oldChooseVarData = JSON.parse(JSON.stringify(this.chooseVarData));
      } else {
        this.$toast('请先选择设备');
      }
    },
    // 搜索变量
    handleSearch() {
      console.log('searchKey--', this.searchKey);
      let filterArr = this.varList.filter(item => {
        console.log(item.vname);
        return item.vname.indexOf(this.searchKey) !== -1;
      });
      console.log('filterArr---', filterArr);
      this.filterVarList = filterArr;
    },
    // 清空搜索
    handleClear() {
      this.filterVarList = this.varList;
    },
    // 选择变量
    selectVar(item) {
      if (!item.checked) {
        if (this.chooseVarData.length === 5) {
          this.$toast('最多选择5个变量');
          return;
        }
      }

      item.checked = !item.checked;
      this.$forceUpdate();
      if (item.checked) {
        this.chooseVarData.push(item);
      } else {
        this.chooseVarData.map((v, i) => {
          if (v.vname === item.vname) {
            this.chooseVarData.splice(i, 1);
          }
        });
      }
    },
    // 取消变量选择
    cancelSelect() {
      if (this.oldChooseVarData.length === 0) {
        this.chooseVarData = [];
      }
      this.showVarBox = false;
    },
    // 确定变量选择
    confirmSelect() {
      this.showVarBox = false;
    },
    // 获取物模型变量
    getModelVariable() {
      getModelVariable({
        id: this.deviceCondition.deviceModelId
      }).then(res => {
        if (res.data && res.data.length) {
          this.varList = res.data;
          this.varList.map(item => {
            item.checked = false;
          });
          // this.varTotal = this.varList.length;
          if (this.chooseVarData.length) {
            this.chooseVarData.map(item => {
              this.varList.map(subItem => {
                if (subItem.vname === item.vname) {
                  subItem.checked = true;
                }
              });
            });
          }
          this.filterVarList = this.varList;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.proportion-analyse-container {
  .choose-var {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.426667rem 0;
    background-color: #fff;

    .choose-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 3.946667rem;
      height: 3.946667rem;
      border: 1px solid #dcdfe6;
      border-radius: 0.16rem;

      .van-icon {
        color: var(--color-gray);
        font-size: 0.853333rem;
      }

      span {
        margin-top: 0.48rem;
        font-size: 0.426667rem;
      }
    }
  }

  .van-popup--bottom {
    border-top-left-radius: 0.426667rem;
    border-top-right-radius: 0.426667rem;

    .var-box {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .var-box-header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.213333rem;
        padding: 0 0.426667rem;
        padding-top: 0.426667rem;

        .model-name {
          margin-right: 0.266667rem;
          font-size: 0.426667rem;
          line-height: 0.533333rem;
        }

        .model-choose {
          flex-shrink: 0;
          color: var(--color-deep-gary);
          font-size: 0.32rem;
        }
      }

      .var-search-box {
        flex-shrink: 0;
        margin-bottom: 0.213333rem;
        border-bottom: 1px solid var(--border-color);
      }

      .var-list {
        flex: 1;
        width: 100%;
        padding: 0 0.426667rem;

        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.32rem 0;
          font-size: 0.373333rem;
          border-bottom: 1px solid var(--border-color);

          &:last-of-type {
            border-bottom: 0;
          }
        }
      }

      .operate-box {
        flex-shrink: 0;
        display: flex;
        width: 100%;
        height: 1.28rem;
        border-top: 1px solid var(--border-color);

        li {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          font-size: 0.426667rem;

          &:first-of-type {
            &::after {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              width: 1px;
              height: 100%;
              background-color: var(--border-color);
            }
          }
        }
      }
    }
  }
}
</style>